const { createApp, ref, computed, onMounted, h } = Vue;

const app = createApp({
    setup() {
        const requests = ref([]);
        const searchText = ref('');

        // 过滤后的请求列表
        const filteredRequests = computed(() => {
            const text = searchText.value.toLowerCase();
            return text
                ? requests.value.filter(req => (req.txcode || '').toLowerCase().includes(text))
                : requests.value;
        });

        // 下载响应数据
        const downloadResponse = (request) => {
            const blob = new Blob([JSON.stringify(request.responseData, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${request.txcode}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        };

        // 展开/收起请求详情
        const toggleExpand = (request) => {
            request.isExpanded = !request.isExpanded;
        };

        // 清除历史
        const clearRequests = async () => {
            await chrome.storage.local.set({ ajaxRequests: [] });
            requests.value = [];
        };

        // 加载请求列表
        const loadRequests = async () => {
            const { ajaxRequests = [] } = await chrome.storage.local.get(['ajaxRequests']);
            requests.value = ajaxRequests.map(req => ({
                ...req,
                isExpanded: false
            }));
        };

        // 监听存储变化
        chrome.storage.onChanged.addListener((changes) => {
            if (changes.ajaxRequests) {
                loadRequests();
            }
        });

        // 初始加载
        onMounted(() => {
            loadRequests();
        });

        // 渲染函数
        function render() {
            return h('div', [
                // 页面头部
                h('div', { class: 'page-header' }, [
                    h('h1', { class: 'page-title' }, '拦截响应'),
                    h('div', { class: 'ajax-controls' }, [
                        h('input', {
                            type: 'text',
                            placeholder: 'Search TXCODE...',
                            value: searchText.value,
                            onInput: (e) => searchText.value = e.target.value
                        }),
                        h('button', {
                            class: 'clear-button',
                            onClick: clearRequests
                        }, 'Clear History')
                    ])
                ]),

                // 请求列表
                h('div', { class: 'request-list' },
                    filteredRequests.value.map(request =>
                        h('div', { class: 'request-item', key: request.timestamp }, [
                            h('div', {
                                class: 'request-header',
                                onClick: () => toggleExpand(request)
                            }, [
                                h('div', { class: 'request-info' }, [
                                    h('span', { class: 'request-txcode' }, request.txcode || 'Unknown'),
                                    h('span', { class: 'request-time' }, request.time)
                                ]),
                                h('div', { class: 'request-actions' }, [
                                    h('button', {
                                        class: 'download-button',
                                        onClick: (e) => {
                                            e.stopPropagation();
                                            downloadResponse(request);
                                        }
                                    }, '下载')
                                ])
                            ]),
                            h('div', {
                                class: ['request-body', { expanded: request.isExpanded }]
                            }, [
                                h('div', { class: 'request-section' }, [
                                    h('h4', '请求体'),
                                    h('pre', JSON.stringify(request.requestBody || {}, null, 2))
                                ]),
                                h('div', { class: 'request-section' }, [
                                    h('h4', '响应体'),
                                    h('pre', JSON.stringify(request.responseData || {}, null, 2))
                                ])
                            ])
                        ])
                    )
                )
            ]);
        }

        return {
            render
        };
    },

    render() {
        return this.render();
    }
});

// 开启 Vue Devtools
app.config.devtools = true;
app.config.performance = true;

app.mount('#app'); 